/*
 * 新增文章分类
 * @Author: LuoQianJun
 * @Date: 2018-01-25 15:49:57
 * @Last Modified by: ljb
 * @Last Modified time: 2018-01-31 18:24:27
 */

<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-article-category-create {
        min-height: 600px;
    }
    
</style>

 <template>

    <div class="v-admin-article-category-create">

        <Row type="flex" justify="start">
            <Col push="1">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                    <Form-item label="类型" prop="super_tag_id">
                        <Select v-model="formValidate.super_tag_id" clearable placeholder="请选择类型">
                            <Option v-for="(value,key) in superTags" :value="key" :key="key">{{ value }}</Option>
                        </Select>
                    </Form-item>

                    <Form-item label="分类名称" prop="name">
                        <Input v-model="formValidate.name" placeholder="请输入分类名称"></Input>
                    </Form-item>

                    <Form-item label="优先级" prop="sort">
                        <InputNumber v-model="formValidate.sort" :max="100" :min="0" placeholder="请输入优先级"></InputNumber>
                    </Form-item>

                    <Form-item label="类别介绍" prop="summary">
                        <Input v-model="formValidate.summary" type="textarea" placeholder="请输入类别介绍"></Input>
                    </Form-item>

                    <Form-item label="封面图" prop="thumb">
                        <Upload :before-upload="file=>fileChange(file,'thumb','image_info')"
                                :on-remove="file=>fileChange(file,'thumb','image_info')"
                                :multiple="false"
                                accept="image/jpg, image/jpeg, image/png"
                                action="//fake_upload_url/">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                            <div class="license-tip" slot="tip" v-if="image_info.name">{{ image_info.name }}</div>
                            <!-- <div class="license-tip" slot="tip" v-else>图片格式为jpg、jpeg或png，大小不超1.5M</div> -->
                        </Upload>
                    </Form-item>

                    <Form-item>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </Form-item>

                </Form>
            </Col>
        </Row>

    </div>

 </template>
 
 <script>

 import { validateImage } from 'src/validate';  //引入校验文件
 
 export default {
     name: 'category-create',

     props: ['super-tags'],

     data: function() {	

         return {

            formValidate : {
                
                super_tag_id : '',

                name : '',

                sort : 0,

                summary : '',

                thumb : ''

            },                  //新增产品分类的表单

            ruleValidate: {
                super_tag_id: [
                    { required: true, message: '请选择类型', trigger: 'blur,change' }
                ],
                name: [
                    { required: true, message: '分类名称不能为空', trigger: 'blur,change' }
                ],
                sort: [
                    { required: true, type: 'number', message: '优先级不能为空', trigger: 'blur,change' }
                ],

                // summary: [
                //     { required: true, message: '类别介绍不能为空', trigger: 'blur,change' }
                // ],

                // thumb: [
                //      { validator: validateUpdateFile, trigger: 'blur,change' }
                // ],
            },

            // 上传的图片信息
            image_info : {
                name: '',
                url: ''         //这个地方可以 base64 编码的图片，然后给 modal 框去显示图片
            }  

        }

     },

     methods: {

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            this[info].name = file.name;

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit (name) {
            
            this.$refs[name].validate((valid) => {
                
                if (valid) {

                    this.$emit('post',this.formDataCreate());

                } else {
                    
                    this.$Message.error('存在未填写的条目!');

                }
            })
        },

         /**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined} 
         */
        handleReset (name) {

            this.$refs[name].resetFields();

            this.formValidate.thumb = '';

            this.image_info.name = '';

        },

        /**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
        formDataCreate(){

            const new_object = {

                super_tag_id : this.formValidate.super_tag_id,

                name : this.formValidate.name,

                sort : this.formValidate.sort,

                summary : this.formValidate.summary,

                thumb : this.formValidate.thumb

            }

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                form_data.append( key , new_object[key] );
        
            });

            return form_data;

        }
        
     }
 }
 </script>
 